<template>
  <div class="modal-body pad">
    <div v-if="currentHealth && currentHealth.details">
      <h5 v-text="$t('health.details.properties')">Properties</h5>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th class="text-left" v-text="$t('health.details.name')">Name</th>
              <th class="text-left" v-text="$t('health.details.value')">Value</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in currentHealth.details.details" :key="index">
              <td class="text-left">{{ index }}</td>
              <td class="text-left">{{ readableValue(item) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div v-if="currentHealth && currentHealth.error">
      <h4 v-text="$t('health.details.error')">Error</h4>
      <pre>{{ currentHealth.error }}</pre>
    </div>
  </div>
</template>

<script lang="ts" src="./health-modal.component.ts"></script>
